<template>
    <div class='start-container'>
        <div class="start-box">
            <div class='left-box'>
                <RouterLink to="/adminLogIn">
                    <div class="icon">
                        <img src="../assets/管理员.png"/> 
                    </div>
                    <div class="title">
                        管理员服务
                    </div>
                    <div class="english-title">
                        admin service
                    </div>
                    <div class="divider"></div>
                    <ul class="menu">
                        <li>学生管理</li>
                        <li>学生组织管理</li>
                        <li>公告管理</li>
                        <li>审核</li>
                        <li>数据监控看板</li>
                        <li>日志记录</li>
                        <li>其他</li>
                    </ul>
                </RouterLink>
            </div>
            <div class="middle-box">
                <RouterLink to="/soLogin">
                    <div class="icon">
                        <img src="../assets/学生组织.png"/>
                    </div>
                    <div class="title">
                        学生组织服务
                    </div>
                    <div class="english-title">
                        student organization service
                    </div>
                    <div class="divider"></div>
                    <ul class="menu">
                        <li>账号详情</li>
                        <li>活动管理</li>
                        <li>组织管理</li>
                        <li>公告</li>
                        <li>新闻稿</li>
                        <li>查询</li>
                    </ul>
                </RouterLink>
            </div>
            <div class="right-box">
                <RouterLink to="/stuLogin">
                    <div class="icon">
                        <img src="../assets/学生.png"/>
                    </div>
                    <div class="title">
                        学生服务
                    </div>
                    <div class="english-title">
                        student service
                    </div>
                    <div class="divider"></div>
                    <ul class="menu">
                        <li>账号详情</li>
                        <li>活动</li>
                        <li>组织</li>
                        <li>新闻稿</li>
                        <li>公告</li>
                        <li>查询</li>
                    </ul>
                </RouterLink>
            </div>
        </div>
    </div>
</template>
<script setup>
import { RouterLink } from 'vue-router';    
</script>
<style lang='scss' scoped>
.start-container {
    min-height: 100vh;
    background: url('../assets/bg.jpg') center/cover no-repeat; // 可自定义背景
    display: flex;
    align-items: center;
    justify-content: center;

    .start-box {
        display: flex;
        justify-content: center;
        align-items: stretch;
        width: 1200px;
        gap: 32px;
        padding: 40px 0;

        .left-box, .middle-box, .right-box {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            min-width: 320px;
            min-height: 600px;
            background: rgba(153, 34, 34, 0.85);
            border-radius: 20px;
            box-shadow: 0 4px 24px rgba(90, 169, 233, 0.18);
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.3s, background 0.3s;

            a {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 48px 32px;
                text-decoration: none;
                color: #fff;
                position: relative;
                z-index: 2;
            }

            .icon {
                margin-bottom: 18px;
                transition: transform 0.4s cubic-bezier(.4,2,.6,1), margin 0.4s;
                img {
                    width: 64px;
                    height: 64px;
                    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.10));
                }
            }
            .title {
                font-size: 2.2rem;
                font-weight: bold;
                margin-bottom: 8px;
                transition: transform 0.4s, font-size 0.4s;
            }
            .english-title {
                font-size: 1.2rem;
                opacity: 0.9;
                margin-bottom: 18px;
                transition: font-size 0.4s, margin 0.4s;
            }
            .divider {
                width: 80%;
                height: 1px;
                background: rgba(255,255,255,0.4);
                margin: 12px 0 18px 0;
                transition: opacity 0.4s;
            }
            .menu {
                list-style: none;
                padding: 0;
                margin: 0;
                width: 100%;
                transition: opacity 0.4s, transform 0.4s;
                li {
                    text-align: center;
                    font-size: 1.1rem;
                    margin: 10px 0;
                    letter-spacing: 1px;
                    font-weight: 500;
                }
            }

            // 动画效果
            &:hover {
                background: rgba(153, 34, 34, 0.95);
                box-shadow: 0 8px 32px rgba(90, 169, 233, 0.28);

                .icon {
                    transform: translateY(-40px) scale(1.2);
                    margin-bottom: 0;
                }
                .title {
                    transform: translateY(-40px) scale(1.1);
                    font-size: 2.5rem;
                }
                .english-title {
                    font-size: 1.5rem;
                    margin-bottom: 0;
                    transform: translateY(-40px);
                }
                .divider, .menu {
                    opacity: 0;
                    pointer-events: none;
                    transform: translateY(40px);
                }
            }
        }
    }
}
</style>